<template>
<div class="list-content">
    <div class="clearfix mb10">
        <div class="fr">
            <router-link :to="this.$route.matched[1].path">
                <input type="button" class="uiBtn-normal uiBtn-orange fl" value="返回">
            </router-link>
        </div>
        <div class="fr mr5">
            <el-select v-model="timeType" placeholder="请选择" class="fl mr10">
                <el-option
                v-for="item in options"
                :key="item.type"
                :label="item.label"
                :value="item.type">
                </el-option>
            </el-select>
            <div class="fl" v-show='Number(timeType) === 6'>
                <el-date-picker class="fl mr5" value-format="yyyy-MM-dd" v-model="startTime" type="date" placeholder="开始日期"></el-date-picker>
                <el-date-picker class="fl mr5" value-format="yyyy-MM-dd" v-model="endTime" type="date" placeholder="结束日期"></el-date-picker>
            </div>
            <input type="button" class="uiBtn-normal uiBtn-blue fl" value="查询" @click="searchMarTable()">
        </div>
    </div>
    <table class="uiTable">
        <thead>
            <tr>
                <th width="3%">序号</th>
                <th width="4%">
                    <select class="theadselect thinScroll" v-model="cityValue" @change="searchMarTable()">
                        <option value="">地区</option>
                        <option :value="item.CityID + '城'" v-for="(item, index) in cityList" :key='index'>城-{{item.CityName}}</option>
                        <option :value="item.dq_id + ',' +item.city_id " v-for="(item, index) in DivisionList" :key='index + cityList.length'>{{item.dq_name}}</option>
                    </select>
                </th>
                <th width="5%" class="relative searchBox">
                    <div v-show="ordernoStatus" class="dailyftSearch dailyftSearch1 clearfix">
                        <div class="fl uiHas-textIcon">
                            <input @keyup.enter="projectSearch();ordernoStatus = false" type="text" class="col-md-12" placeholder="项目单号" v-model='orderno'>
                            <i class="uiText-searchIcon bgIcon" @click="projectSearch();ordernoStatus = false"></i>
                        </div>
                    </div>
                    <span class="serial_number" @click="ordernoStatus = true" v-show="!ordernoStatus">合同号<i class="bgIcon"></i></span>
                </th>
                <th width="3%" >状态</th>
                <th width="6%" class="relative searchBox">
                    <div v-show="proManStatus" class="dailyftSearch dailyftSearch1 clearfix">
                        <div class="fl uiHas-textIcon">
                            <input @keyup.enter="searchMarTable();proManStatus = false" type="text" class="col-md-12" placeholder="项目经理" v-model='proMan'>
                            <i class="uiText-searchIcon bgIcon" @click="searchMarTable();proManStatus = false"></i>
                        </div>
                    </div>
                    <span class="serial_number" @click="proManStatus = true" v-show="!proManStatus">项目经理<i class="bgIcon"></i></span>
                </th>
                <th width="4%" >开工</th>
                <th width="4%">
                    <select class="theadselect thinScroll" v-model="stageValue">
                        <option value="0">阶段</option>
                        <option value="1">审计</option>
                        <option value="2">准备</option>
                        <option value="3">在施</option>
                        <option value="31">施前</option>
                        <option value="32">施中</option>
                        <option value="33">施尾</option>
                        <option value="4">竣工</option>
                        <option value="5">完工</option>
                        <option value="6">历史</option>
                        <option value="98">审准施</option>
                        <option value="99">竣完历</option>
                    </select>
                </th>
                <th width="7%">
                    <div class="thSortBox2 clearfix">
                        <span class="fl">材料计划(元)</span>
                        <div class="thSort">
                            <a href="javascript:;" class="thSortA thSortAt"  @click="sortData('planMoney', 1)">
                                <i class="thSortI thSort-up"></i>
                            </a>
                            <a href="javascript:;" class="thSortA thSortAb" @click="sortData('planMoney', 2)">
                                <i class="thSortI thSort-down"></i>
                            </a>
                        </div>
                    </div>
                </th>
                <th width="7%">
                    <div class="thSortBox2 clearfix">
                        <span class="fl">增减材料(元)</span>
                        <div class="thSort">
                            <a href="javascript:;" class="thSortA thSortAt"  @click="sortData('changeMoney', 1)">
                                <i class="thSortI thSort-up"></i>
                            </a>
                            <a href="javascript:;" class="thSortA thSortAb" @click="sortData('changeMoney', 2)">
                                <i class="thSortI thSort-down"></i>
                            </a>
                        </div>
                    </div>
                </th>
                <th width="7%">
                    <div class="thSortBox2 clearfix">
                        <span class="fl">储值材料(元)</span>
                        <div class="thSort">
                            <a href="javascript:;" class="thSortA thSortAt"  @click="sortData('namelessMoney', 1)">
                                <i class="thSortI thSort-up"></i>
                            </a>
                            <a href="javascript:;" class="thSortA thSortAb" @click="sortData('namelessMoney', 2)">
                                <i class="thSortI thSort-down"></i>
                            </a>
                        </div>
                    </div>
                </th>
                <th width="5%">
                    <div class="thSortBox2 clearfix">
                        <span class="fl">工期(天)</span>
                        <div class="thSort">
                            <a href="javascript:;" class="thSortA thSortAt"  @click="sortData('workerDay', 1)">
                                <i class="thSortI thSort-up"></i>
                            </a>
                            <a href="javascript:;" class="thSortA thSortAb" @click="sortData('workerDay', 2)">
                                <i class="thSortI thSort-down"></i>
                            </a>
                        </div>
                    </div>
                </th>
                <th width="7%">
                    <div class="thSortBox2 clearfix">
                        <span class="fl">进展工期(天)</span>
                        <div class="thSort">
                            <a href="javascript:;" class="thSortA thSortAt"  @click="sortData('actualDay', 1)">
                                <i class="thSortI thSort-up"></i>
                            </a>
                            <a href="javascript:;" class="thSortA thSortAb" @click="sortData('actualDay', 2)">
                                <i class="thSortI thSort-down"></i>
                            </a>
                        </div>
                    </div>
                </th>
                <th width="7%">
                    <div class="thSortBox2 clearfix">
                        <span class="fl">在途金额(元)</span>
                        <div class="thSort">
                            <a href="javascript:;" class="thSortA thSortAt"  @click="sortData('moneyToDis', 1)">
                                <i class="thSortI thSort-up"></i>
                            </a>
                            <a href="javascript:;" class="thSortA thSortAb" @click="sortData('moneyToDis', 2)">
                                <i class="thSortI thSort-down"></i>
                            </a>
                        </div>
                    </div>
                </th>
                <th width="7%">
                    <div class="thSortBox2 clearfix">
                        <span class="fl">收货代付(元)</span>
                        <div class="thSort">
                            <a href="javascript:;" class="thSortA thSortAt"  @click="sortData('moneyToWaitPaid', 1)">
                                <i class="thSortI thSort-up"></i>
                            </a>
                            <a href="javascript:;" class="thSortA thSortAb" @click="sortData('moneyToWaitPaid', 2)">
                                <i class="thSortI thSort-down"></i>
                            </a>
                        </div>
                    </div>
                </th>
                <th width="7%">
                    <div class="thSortBox2 clearfix">
                        <span class="fl">已付总额(元)</span>
                        <div class="thSort">
                            <a href="javascript:;" class="thSortA thSortAt"  @click="sortData('paidMoney', 1)">
                                <i class="thSortI thSort-up"></i>
                            </a>
                            <a href="javascript:;" class="thSortA thSortAb" @click="sortData('paidMoney', 2)">
                                <i class="thSortI thSort-down"></i>
                            </a>
                        </div>
                    </div>
                </th>
                <th width="7%">
                    <div class="thSortBox2 clearfix">
                        <span class="fl">配送总额(元)</span>
                        <div class="thSort">
                            <a href="javascript:;" class="thSortA thSortAt"  @click="sortData('totalMoney', 1)">
                                <i class="thSortI thSort-up"></i>
                            </a>
                            <a href="javascript:;" class="thSortA thSortAb" @click="sortData('totalMoney', 2)">
                                <i class="thSortI thSort-down"></i>
                            </a>
                        </div>
                    </div>
                </th>
                <th width="3%">配比</th>
                <th width="6%">
                    <div class="thSortBox2 clearfix">
                        <span class="fl">应配额(元)</span>
                        <div class="thSort">
                            <a href="javascript:;" class="thSortA thSortAt"  @click="sortData('shouldMoney', 1)">
                                <i class="thSortI thSort-up"></i>
                            </a>
                            <a href="javascript:;" class="thSortA thSortAb" @click="sortData('shouldMoney', 2)">
                                <i class="thSortI thSort-down"></i>
                            </a>
                        </div>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
               <td width="3%"></td>
               <td width="4%"></td>
               <td width="5%">{{totalInfo !== null && totalInfo.proCount !== null ? totalInfo.proCount : '--'}}</td>
               <td width="3%"></td>
               <td width="6%"></td>
               <td width="4%"></td>
               <td width="4%"></td>
               <td width="7%">{{totalInfo !== null && totalInfo.planMoney !== null ? totalInfo.planMoney : '--'}}</td>
               <td width="7%"></td>
               <td width="7%"></td>
               <td width="5%"></td>
               <td width="7%"></td>
               <td width="7%"></td>
               <td width="7%"></td>
               <td width="7%">{{totalInfo !== null && totalInfo.paidMoney !== null ? totalInfo.paidMoney : '--'}}</td>
               <td width="7%">{{totalInfo !== null && totalInfo.totalMoney !== null ? totalInfo.totalMoney : '--'}}</td>
               <td width="3%"></td>
               <td width="6%"></td>
            </tr>
        </tbody>
    </table>
    <div class="thinScroll thinScroll-table" v-scrollHeight="15" v-loading="loading" >
        <table class="uiTable uiTable-striped-odd uiTable-hover">
            <tbody>
                <tr v-for="(item,index) in listData" :key="index">
                    <td width="3%">{{index + 1}}</td>
                    <td width="4%">{{item.cityName}}</td>
                    <td width="5%">{{item.contractNo}}</td>
                    <td width="3%" :class="item.proInfoState ? 'cGreen' : 'cRed'">{{item.proInfoState ? '正常' : '异常'}}</td>
                    <td width="6%">{{item.managerName}}</td>
                    <td width="4%">{{item.startTime}}</td>
                    <td width="4%">{{item.proState}}</td>
                    <td width="7%">{{item.planMoney}}</td>
                    <td width="7%">{{item.changeMoney}}</td>
                    <td width="7%">{{item.namelessMoney}}</td>
                    <td width="5%">{{item.workerDay}}</td>
                    <td width="7%">{{item.actualDay}}</td>
                    <td width="7%">{{item.moneyToDis}}</td>
                    <td width="7%">{{item.moneyToWaitPaid}}</td>
                    <td width="7%">{{item.paidMoney}}</td>
                    <td width="7%">{{item.totalMoney}}</td>
                    <td width="3%">{{item.disRate}}</td>
                    <td width="6%">{{item.shouldMoney}}</td>
                </tr>
                <tr v-if="listData.length === 0"> <td class="tx-center" colspan="31">暂无数据</td></tr>
            </tbody>
        </table>
    </div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { GetProInfoItemsToList, getSitelist, GetCityItems } from '../../Resources/Api/index'
export default {
    data () {
        return {
            startTime: '', // 开始时间
            endTime: '', // 结束时间
            options: [{
                type: '1',
                label: '本日'
            }, {
                type: '2',
                label: '本周'
            }, {
                type: '3',
                label: '本月'
            }, {
                type: '4',
                label: '本季'
            }, {
                type: '5',
                label: '本年'
            }, {
                type: '6',
                label: '自定义'
            }],
            timeType: '3', // 日期类型
            DivisionList: [], // 分司 数组
            cityList: [], // 城 数组
            totalInfo: null, // 列表总和
            listData: [], // 列表数据
            listCloneData: [], // 列表数据拷贝
            cityValue: '', // 城市Value
            listParm: {}, // 动态参数
            stageValue: '0', // 阶段Value
            loading: false, // 是否loading
            proMan: '', // 项目经理value
            proManStatus: false, // 项目经理搜索

            orderno: '', // 项目单号Value
            ordernoStatus: false // 项目单号
        }
    },
    computed: {
        ...mapGetters(['leftInfo', 'userInfo'])
    },
    created () {
        // 集团登录
        this.listParm = {}
        if (Number(this.userInfo.as_diquId) === 39) {
            this.GetCityItems()
            this.listParm = {
                stage: 0,
                username: this.proMan,
                timeType: Number(this.timeType) === 6 ? -1 : Number(this.timeType),
                planType: 0,
                ratioType: 0
            }
        } else {
            // 城登陆
            if (this.userInfo.as_role === 2) {
                this.getCityList()
                this.listParm = {
                    townID: this.userInfo.as_areaId,
                    // townID: this.userInfo.as_diquId,
                    stage: 0,
                    username: this.proMan,
                    timeType: Number(this.timeType) === 6 ? -1 : Number(this.timeType),
                    planType: 0,
                    ratioType: 0
                }
            } else {
                this.listParm = {
                    // cityID: this.userInfo.as_areaId,
                    cityID: this.userInfo.as_diquId,
                    stage: 0,
                    username: this.proMan,
                    timeType: Number(this.timeType) === 6 ? -1 : Number(this.timeType),
                    planType: 0,
                    ratioType: 0
                }
            }
        }
        this.GetProInfoItemsToList(this.listParm)
    },
    methods: {
        ...mapMutations({
            setUpDatePlate: `SET_UPDATE_PLATE`
        }),
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 直接进行路由跳转路径
        routerPush (path) {
            this.$router.push(this.$route.matched[1].path + '/' + path)
        },
        // 搜索
        searchMarTable () {
            if (Number(this.timeType) === 6) {
                if (this.startTime === '' || this.endTime === '') {
                    this.$message('请选择开始日期和结束日期')
                    return false
                } else {
                    this.listParm.start = this.startTime
                    this.listParm.end = this.end
                }
            }
            this.listParm.username = this.proMan
            this.listParm.timeType = Number(this.timeType) === 6 ? -1 : Number(this.timeType)
            if (Number(this.userInfo.as_diquId) === 39) {
                // 城筛选
                this.listParm.stage = Number(this.stageValue)
                if (this.cityValue !== '') {
                    if (this.cityValue.includes('城')) {
                        const townID = this.cityValue.substring(0, this.cityValue.length - 1)
                        this.listParm.townID = Number(townID)
                    } else {
                        const townID = this.cityValue.split(',')
                        this.listParm.cityID = Number(townID[0])
                        this.listParm.townID = Number(townID[1])
                    }
                } else {
                    this.listParm = {
                        stage: Number(this.stageValue),
                        username: this.proMan,
                        timeType: Number(this.timeType) === 6 ? -1 : Number(this.timeType),
                        planType: 0,
                        ratioType: 0
                    }
                }
            } else {
                // 城登陆
                if (this.userInfo.as_role === 2) {
                    if (this.cityValue !== '') {
                        this.listParm.stage = Number(this.stageValue)
                        const cityID = this.cityValue.split(',')
                        this.listParm.cityID = Number(cityID[0])
                        this.listParm.townID = Number(cityID[1])
                    } else {
                        this.listParm = {
                            townID: this.userInfo.as_areaId,
                            stage: Number(this.stageValue),
                            username: this.proMan,
                            timeType: Number(this.timeType) === 6 ? -1 : Number(this.timeType),
                            planType: 0,
                            ratioType: 0
                        }
                    }
                } else {
                    this.listParm.stage = Number(this.stageValue)
                }
            }
            this.GetProInfoItemsToList(this.listParm)
        },
        // 项目单号搜索
        projectSearch  () {
            if (this.orderno === '') {
                this.listData = this.listCloneData
            } else {
                this.listData = this.listCloneData.filter(item => {
                    return (
                        String(item.contractNo).match(this.orderno)
                    )
                })
            }
        },
        // 加载页面
        GetProInfoItemsToList (params) {
            // 用_this 代替this
            let _this = this
            this.loading = true
            // 获取列表数据
            GetProInfoItemsToList(params).then(results => {
                if (results.data.statusCode === 1) {
                    this.totalInfo = results.data.body.totalInfo
                    this.listCloneData = results.data.body.items
                    this.listData = this.listCloneData
                    this.loading = false
                }
            }).catch(error => {
                _this.loading = false
                console.log(error)
            })
        },
        // 获取分司list
        getCityList () {
            getSitelist({}).then((results) => {
                if (results.data.rsglDiqus !== null && results.data.rsglDiqus.length > 0) {
                    this.DivisionList = results.data.rsglDiqus
                    // 城下拉框
                    if (this.userInfo.as_role === 2) {
                        this.DivisionList = this.DivisionList.filter((item) => { return Number(item.city_id) === Number(this.userInfo.as_areaId) })
                    }
                }
            }).catch((error) => {
                console.log(error)
            })
        },
        // 获取城List
        GetCityItems () {
            GetCityItems({type: 2}).then((results) => {
                if (results.data !== null && results.data.length > 0) {
                    this.cityList = results.data
                    this.getCityList()
                }
            }).catch((error) => {
                console.log(error)
            })
        },
        // 排序函数
        compare (prop, type) {
            // 从小到大
            if (type === 1) {
                return function (a, b) {
                    return a[prop] - b[prop]
                }
            // 从大到小
            } else if (type === 2) {
                return function (a, b) {
                    return b[prop] - a[prop]
                }
            }
        },
        // 从大到小
        sortData (value, type) {
            this.listData = this.listData.sort(this.compare(value, type))
        }
    }

}
</script>
<style lang="scss" scoped>
    .uiTable td{
        word-break: break-all;
    }
    .searchBox {
        .dailyftSearch{
            width: 90px;
        }
        .dailyftSearch .uiHas-textIcon {
            width: 90px;
            margin: 4px 0 0 1px;
        }
    }

</style>
